<template>
  <div class="comment-box">
    <div class="disc item">
      <div class="item-h">
        <span class="line"></span>
        <b class="ftz16">我有话说</b>
        <span class="tip">文明上网理性发言，请登录后评论</span>
        <div class="count">
          <b>{{data.total}}</b>人评论
        </div>
      </div>
      <div class="write">
        <textarea placeholder="来说两句吧" v-model="add.content"></textarea>
        <div class="write-sub">
          <span>{{add.content.length}}/300</span>
          <span :class="['btn',{off: add.pload}]" @click="addComment">发表</span>
        </div>
      </div>
      <div class="item-h">
        <span class="line"></span>
        <b class="ftz16">全部评论</b>
      </div>
      <div class="comment-list">
        <ul>
          <li v-for="(item, index) in data.list" :key="index">
            <div class="img"><img :src="item.comment.fromUserAvatar" /></div>
            <div class="author">
              <b class="ftz16">{{item.comment.fromUserName}}</b><span class="time">{{item.comment.createTime | dateDiff}}</span>
              <div class="btnr">
                <span class="btn" @click="replyClick(item)" v-if="!item.commentReply && userId === authorId && item.comment.fromUserId !== authorId">回复</span>
                <span :class="['like', {likes:item.comment.isLike}]" @click="likeComment(item.comment)">{{item.comment.likeNum}}</span>
              </div>
            </div>
            <div class="con" v-html="item.comment.content.replace(/\n/g,'<br>')">
            </div>
            <div class="reply" v-if="item.commentReply">
              <span><b>{{item.commentReply.fromUserName}}</b><i>对</i><b>{{item.commentReply.toUserName}}</b><i>说：</i></span>
              <p v-html="item.commentReply.content.replace(/\n/g,'<br>')"></p>
              <div class="time">{{item.commentReply.createTime | dateDiff}}</div>
            </div>
            <div class="write" v-if="reply.commentId === item.comment.id">
              <textarea placeholder="来说两句吧" v-model="reply.content"></textarea>
              <div class="write-sub">
                <span>{{reply.content.length}}/300</span>
                <span :class="['btn',{off: reply.pload}]" @click="replyComment">发表</span>
              </div>
            </div>
          </li>
        </ul>
        <div :class="['more',{ok: !(loading || page.pageNum >= data.pages)}]" @click="more">
          <span v-if="!loading">{{page.pageNum >= data.pages ? '没有更多评论了':'查看更多评论'}}</span>
          <span v-else>加载中...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/service/api'
export default {
  props: {
    articleId: String,
    authorId: String,
    articleType: Number
  },
  data () {
    return {
      page: {
        pageNum: 1,
        pageSize: 2
      },
      loading: false,
      data: { list: [] },
      add: {
        pload: false,
        content: '',
        contentSource: 0
      },
      reply: {
        pload: false,
        commentId: '',
        content: '',
        contentSource: 0
      }
    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  created () {
    this.page.articleId = this.articleId
    this.add.articleId = this.articleId
    this.add.articleType = this.articleType
    this.getComment()
  },
  methods: {
    async getComment (n) {
      if (n) {
        this.page.pageNum = 1
        this.data = {
          list: []
        }
      }
      try {
        this.loading = true
        let res = await api.getComment({ ...this.page })
        res.data.list = this.data.list.concat(res.data.list)
        this.data = res.data
      } catch (error) {
      }
      this.loading = false
    },
    more () {
      if (this.page.pageNum >= this.data.pages) {
        return false
      }
      this.page.pageNum++
      this.getComment()
    },
    async likeComment (item) {
      if (item.isLike) {
        return false
      }
      await api.likeComment({ commentId: item.id })
      item.isLike = 1
      item.likeNum++
    },
    async addComment () {
      if (!this.userId) {
        window.layer.msg('请先登录')
        return false
      }
      if (this.add.content.length > 300) {
        window.layer.msg('内容不能超过300个字符')
        return false
      }
      if (this.add.pload) {
        return false
      }
      try {
        this.add.pload = true
        await api.addComment(this.add)
        window.layer.msg('发布成功')
        this.add.content = ''
        this.getComment(true)
      } catch (error) {
      }
      this.add.pload = false
    },
    replyClick (item) {
      if (item.commentReply) {
        window.layer.msg('不能重复回复')
        return false
      }
      this.reply.commentId = item.comment.id
    },
    async replyComment () {
      if (this.reply.content.length > 300) {
        window.layer.msg('内容不能超过300个字符')
        return false
      }
      if (this.reply.pload) {
        return false
      }
      try {
        this.reply.pload = true
        await api.replyComment(this.reply)
        window.layer.msg('回复成功')
        this.reply.commentId = ''
        this.reply.content = ''
        this.getComment(true)
      } catch (error) {
      }
      this.reply.pload = true
    }
  }
}
</script>

<style scoped lang="scss">
.comment-box {
  * {
    box-sizing: border-box;
  }
  .item-h {
    position: relative;
    .tip {
      color: #888;
    }
    .count {
      position: absolute;
      right: 15px;
      top: 0;
      b {
        color: #f00;
      }
    }
  }
  .comment-list {
    padding: 15px;
    .more {
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #f0f0f0;
      color: #adadad;
      font-size: 14px;
      cursor: default;
      &.ok {
        cursor: pointer;
        &:hover {
          background: #f4f4f4;
          color: #888;
        }
      }
    }
    li {
      position: relative;
      padding-left: 60px;
      margin: 15px 0;
      min-height: 65px;
      border-bottom: 1px #e6e6e6 solid;
      padding-bottom: 15px;
      .img {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        overflow: hidden;
        border-radius: 50%;
        background: #f4f4f4;
        img {
          width: 50px;
          height: 50px;
          display: block;
        }
      }
      .reply {
        padding: 10px 15px;
        background: #f7f7f7;
        margin-top: 15px;
        p {
          padding: 5px 0;
        }
        span {
          color: #888;
          b {
            color: #379be9;
          }
          i {
            font-style: normal;
            padding: 0 5px;
          }
        }
        .time {
          color: #888;
        }
      }
      .write {
        margin: 15px 0;
      }
      .author {
        position: relative;
        padding-bottom: 10px;
        b {
          color: #379be9;
        }
        .time {
          color: #888;
          padding-left: 15px;
        }
        .btnr {
          position: absolute;
          right: 0;
          top: 0;
          span {
            display: inline-block;
            line-height: 26px;
            cursor: pointer;
            &.btn {
              color: #379be9;
              margin-right: 10px;
            }
            &.like {
              background: url(../../assets/res/img/icon_hand.png) no-repeat left
                center;
              padding-left: 18px;
              &.likes {
                background-image: url(../../assets/res/img/icon_hand_on.png);
              }
            }
          }
        }
      }
    }
  }
  .write {
    border: 1px #e6e6e6 solid;
    border-radius: 6px;
    margin: 15px;
    overflow: hidden;
    textarea {
      width: 100%;
      height: 60px;
      padding: 10px;
      border: 0;
      resize: none;
    }
    .write-sub {
      text-align: right;
      padding: 10px;
      span {
        display: inline-block;
        line-height: 26px;
        color: #888;
        padding: 0 10px;
        &.btn {
          border: 1px #f00 solid;
          border-radius: 6px;
          color: #f00;
          padding: 0 25px;
          cursor: pointer;
          &.off {
            border-color: #666;
            color: #666;
          }
        }
      }
    }
  }
}
</style>
